<template>
	<div class="booklist">
		<!-- 轮播区域 -->
		<!-- <div class="banner">
			<el-carousel :interval="5000" arrow="nerver" height="15rem">
			    <el-carousel-item v-for="item in HotBanner" :key="item.id">
			      <img :src="item.picture"/>
			    </el-carousel-item>
			  </el-carousel>
		</div> -->
		<MobileBooksGit></MobileBooksGit>
	</div>
</template>

<script>
	import MobileBooksGit from '@/components/mobile/bookslist/MobileBooksGit.vue';
	export default{
		name:'MobileBooksList',
		components:{MobileBooksGit},
		data(){
			return{
				bannerlist: [],
			}
		},
		computed:{
			HotBanner(){
				this.bannerlist.sort((a1,a2)=>{
					return a2.hot-a1.hot
				})
				let arr=[];
				this.bannerlist.forEach((item,i)=>{
					if(i<4){
						arr.push(item);
					}
				})
				return arr;
			}
		},
	}
</script>

<style scoped>
	.booklist{
		position: relative;
		overflow: hidden;
		top: 56px;
		width: 100%;
	}
	.booklist .banner{
		width: 100%;
		height: 15rem;
		background-color: orange;
	}
	.booklist .banner img{
		width: 100%;
		height: 100%;
	}
	.booklist .banner .el-carousel /deep/.el-carousel__button{
		height: 5px !important;
	}
	.booklist .banner .el-carousel /deep/.is-active .el-carousel__button{
		background-color: #a68b5b !important;
	}
</style>
